<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 ref="one">title == {{ title }}</h2>
        <my-head></my-head>
        <Parent></Parent>
    </div>

    <template id="parent">
        <div style="border: 1px solid salmon;padding: 15px;">
            <h2>Parent - 父组件 - 1</h2>
            <h2 @click="count++">count = {{count}}</h2>
            <p>
                <input type="text" v-model="text">
            </p>
            <button @click="show=!show">点击切换</button>
            <button @click="changeChild">通过Ref 去修改子组件num</button>
            <button @click="changeMsg">通过Ref 去修改子组件Message</button>
            <button @click="change">通过Ref 去修改子组件 调取方法</button>
            <child-one ref="child" :count="count" :text="text" :show="show"></child-one>
        </div>
    </template>

    <template id="childone">
        <div style="border:1px solid darkgoldenrod;padding:15px;" v-if="show">
            <h2>childone - 1 - 子组件 </h2>
            <h2>父count= {{ count }}</h2>
            <h2>text= {{ text }} </h2>
            <h2>num == {{ num}} </h2>
            <h2>message == {{ message }}</h2>
            <h2> foo == {{foo}} </h2>
            <h2> total = {{total}} </h2>
        </div>
    </template>
    <script>
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        Vue.component('Parent', {
            template: "#parent",
            provide: {  // 定义给后代的数据
                foo: 'bar',
                total: 888,
            },
            data() {
                return {
                    count: 2000,
                    text: 'Are you OK',
                    show: true
                }
            },
            methods: {
                changeChild() {
                    console.log(this.$refs.child);
                    this.$refs.child.num += 10;
                },
                changeMsg() {
                    this.$refs.child.message = 'wh2309'
                },
                change() {
                    // this.$refs.child = 子组件内部的this
                    this.$refs.child.change()
                }
            }
        })
        Vue.component('ChildOne', {
            template: '#childone',
            inject: ['foo', 'total'],   // 后台接受来自父辈的数据
            props: {
                count: Number,
                text: String,
                show: Boolean
            },
            data() {
                return {
                    num: 1000,
                    message: 'Work hard for offers'
                }
            },
            methods: {
                change() {
                    this.num += 1;
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '组件通信 - （父改子）',
                word: '2309',
                flag: true,
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                this.$refs.one.style.fontSize = '20px'
            }
        })
    </script>
    <!-- 
        组件通信
        组件  小巧  独立  可复用  

        组件系统 
        组件组织关系  

        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        组件之间的通信  

        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs   指向这个子组件对象    
        c. 事件总线 (bus new Vue)
        d. events 事件   (emit on )
        e. vuex (最后一天) 
        f. provide + inject 


        2. 子组件访问父组件

        3. 兄弟组件之间的通信

        refs   this.$refs  

        1. 绑定到标签  指的当前的真实DOM 

        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>

</html>